<template>
  <div class="app-container">
    <el-row>
      <el-col :span="24" class="card-box">
        <el-card>
          <div slot="header"><span>服装销量信息</span></div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <div ref="costumesale1" style="height: 420px" />
          </div>
        </el-card>
      </el-col>
    </el-row>

     <el-col :span="24" class="card-box">
       <el-card>
       <div slot="header"><span>服装时段销售信息</span></div>
         <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">

            <el-row gutter="15">
              <el-col :span="10">
                <el-form-item label="日期范围" prop="field105">
                  <el-date-picker type="daterange" v-model="formData.field105" format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd" :style="{width: '100%'}" start-placeholder="开始日期"
                    end-placeholder="结束日期" range-separator="至" clearable></el-date-picker>
                </el-form-item>
              </el-col>

            <el-form-item size="large">
              <el-button type="primary" @click="submitForm">提交</el-button>
              <el-button @click="resetForm">重置</el-button>
            </el-form-item>
            </el-row>

                   <div class="el-table el-table--enable-row-hover el-table--medium">
                    <div ref="costumesale2" style="height: 420px" />
                   </div>

          </el-form>
       </el-card>
     </el-col>

  </div>
</template>

<script>
import { getPieData } from "@/api/costumeShop/charts";


export default {
  name: "",
  components: {},
   props: [],
   data() {
     return {
       formData: {
         field105: ["2022-05-01", "2022-05-14"],
       },
       rules: {
         field105: [{
           required: true,
           type: 'array',
           message: '日期范围不能为空',
           trigger: 'change'
         }],
       },
     }
   },
   computed: {},
   watch: {},
   created() {},
    mounted() {
      getPieData().then((response) => {
        const pieData = response;
        this.initEcharts(pieData);
        this.initEcharts2(pieData);
      });
    },
  methods: {

    submitForm() {
        this.$refs['elForm'].validate(valid => {
          if (!valid) return
          // TODO 提交表单
        })
      },
      resetForm() {
        this.$refs['elForm'].resetFields()
      },
      initEcharts(pieData) {
        var myChart1 = this.$echarts.init(this.$refs.costumesale1)
        var option = {
          title: {
            text: '服装销售量分析',
            subtext: '按商品类型',
            left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'left',
            itemWidth:80,
            itemHeight:30
          },
          series: [{
            name: '占所有商品类型的',
            type: 'pie',
            radius: '75%',
            data: pieData,
            emphasis: {
              itemStyle: {
                shadowBlur:10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }]
        }
        option && myChart1.setOption(option)
      },
      initEcharts2(pieData) {
              var myChart2 = this.$echarts.init(this.$refs.costumesale2)
              var option2 = {

                title: {
                  text: '服装销售量分析',
                  subtext: '按商品类型',
                  left: 'center'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                      type: 'shadow'
                    }
                  },
                xAxis: {
                    type: 'category',
                    data: ['上衣', '下装', '帽子', '鞋类']
                  },
                  yAxis: {
                    type: 'value'
                  },
                  series: [
                    {
                      data:pieData,
                      type: 'bar',
                      itemStyle: {
                                  normal: {
                                      color: function(params) {
                                          var colorList = ['#F43368',  '#d48265','#91c7ae','#749f83','#c23531','#2f4554', '#61a0a8', '#ca8622'];
                                          return colorList[params.dataIndex]
                                      }
                                  }
                              }

                    }
                  ]
              }
              option2 && myChart2.setOption(option2)
            }
    }
  }






  </script>
